<template>
	<view class="u-announcement">
		<view class="u-notice-bar">
			<view class="u-direction-row">
				<view class="u-notice-content" :style="{left:textLeft+'rpx'}" id="u-notice-content">
					<view class="u-no-item" v-for="(item,index) in showText">
						<text class="u-notice-text u-text">{{item}}</text>
					</view>
					<!-- :style="{animationDuration: animationDuration,animationPlayState: animationPlayState}" -->
					<view class="u-no-item" v-for="(item,index) in showText" v-if="isshow">
						<text class="u-notice-text u-text">{{item}}</text>
					</view>
					<!-- :style="{animationDuration: animationDuration,animationPlayState: animationPlayState}" -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationDuration: '10s',
				animationPlayState: 'paused',
				showText: [
					'你这是', '非常好', '你这是非常好'
				],
				textLeft: 0,
				isshow: false,
				allwidth: 0
			}
		},
		methods: {
			initSize() {
				let query = [];
				let textQuery = new Promise(resolve => {
					uni.createSelectorQuery().in(this).select(`#u-notice-content`).boundingClientRect().exec(
						ret => {
							console.log(ret);
							// uni.upx2px(ret[0].width)
							// this.showText.map(item => {
							// 	return this.allwidth += Number(item.length * 24 + 96)
							// })
							// console.log(ret[0].width/(uni.upx2px(100)/100));
							this.textWidth = ret[0].width / (uni.upx2px(100) / 100);
							if (this.textWidth > 702) {
								this.isshow = false
								this.textLeft = 160
							} else {
								this.isshow = true
							}
							resolve();
						}
					);
				});
				query.push(textQuery);
				Promise.all(query).then(() => {
					this.animationDuration = `${this.textWidth / uni.upx2px(100)}s`;
					this.animationPlayState = 'paused';
					setTimeout(() => {
						this.animationPlayState = 'running';
					}, 10);
				});
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initSize();
			});
		}
	}
</script>

<style lang="scss" scoped>
	.u-notice-bar {
		padding: 18upx 24upx;
		overflow: hidden;
	}

	.u-direction-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 100%;
		padding: 18rpx 24rpx;
	}

	.u-icon-wrap {
		display: flex;
		align-items: center;
	}

	.u-icon-left {
		width: 36upx;
		height: 36upx;
		margin-right: 20upx;
	}

	.u-notice-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		overflow: hidden;
		margin-left: 12upx;
	}

	.u-notice-text {
		font-size: 26upx;
		word-break: keep-all;
		white-space: nowrap
	}

	.u-notice-content {
		animation: u-loop-animation 10s linear infinite both;
		text-align: right;
		// padding-left: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		position: absolute;
	}

	.u-no-item {
		font-size: 24rpx;
		padding: 8rpx 36rpx;
		background-color: rgba($color: #FFFFFF, $alpha: 0.6);
		border-radius: 36rpx;

		&+.u-no-item {
			margin-left: 24rpx;
		}
	}

	@keyframes u-loop-animation {
		0% {
			transform: translate3d(0, 0, 0);
		}

		100% {
			transform: translate3d(-100%, 0, 0);
		}
	}

	.u-icon-right {
		width: 12upx;
		height: 22upx;
		margin-left: 10upx;
	}

	.u-text {
		font-size: 26upx;
	}

	.app-transparent-frame {
		width: 600upx;
	}

	.app-top-image {
		height: #{150rpx};
		width: #{600rpx};
		background-repeat: no-repeat;
		background-size: cover;

		// &.icon {
		// 	background-image: url("../../../static/image/icon/announcement.png");
		// }
	}

	.u-bottom-content {
		background-color: #ffffff;
		padding: 50upx;
		border-bottom-right-radius: 11upx;
		border-bottom-left-radius: 11upx;
	}

	.u-button {
		margin: 0 auto;
		font-size: 31upx;
		text-align: center;
		height: 80upx;
		line-height: 80upx;
	}

	.u-content {
		display: block;
		min-height: 144upx;
		max-height: 285upx;
		width: 500upx;
		margin-bottom: 66upx;
		word-break: break-all;
		line-height: 48upx;
	}
</style>
